<template>
  <div class="popup">
    <!-- 标签 -->
    <div class="title">
      <p>标签</p>
      <em class="el-icon-close"></em>
    </div>
    <!-- 一类标签 -->
    <div class="label">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="一类标签(9)" name="1">
          <div class="box1">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签1</span>
          </div>
          <div class="box2">
            <em class="el-icon-plus"></em> <span>标签2</span>
          </div>
          <div class="box3">
            <em class="el-icon-plus"></em> <span>标签3</span>
          </div>
          <div class="box4">
            <em class="el-icon-plus"></em> <span>标签4</span>
          </div>
          <div class="box5">
            <em class="el-icon-plus"></em> <span>标签5</span>
          </div>
          <div class="box6">
            <em class="el-icon-plus"></em> <span>标签6</span>
          </div>
          <div class="box7">
            <em class="el-icon-plus"></em> <span>标签7</span>
          </div>
          <div class="box8">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签8</span>
          </div>
          <div class="box9">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签9</span>
          </div>
        </el-collapse-item>
        <el-collapse-item title="二类标签(3)" name="2">
          <div class="box1">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签1</span>
          </div>
          <div class="box2">
            <em class="el-icon-plus"></em> <span>标签2</span>
          </div>
          <div class="box8">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签8</span>
          </div>
          <div class="box9">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签9</span>
          </div>
        </el-collapse-item>
        <el-collapse-item title="三类标签(3)" name="3">
          <div class="box1">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签1</span>
          </div>
          <div class="box2">
            <em class="el-icon-plus"></em> <span>标签2</span>
          </div>
          <div class="box8">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签8</span>
          </div>
          <div class="box9">
            <img src="../assets/images/check_mark@2x.png" alt="" /> <span>标签9</span>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="btn">
      <el-button type="info">取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Popup",
  data() {
    return {
      activeNames: ["1"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss">
.btn .el-button {
  width: 1.2rem;
  height: 0.38rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
}
.popup {
  width: 4.2rem;
  min-height: 2.6rem;
  background: #474747;
  padding-bottom: 0.19rem;
}

/*    标题*/
.title {
  width: 100%;
  height: 0.48rem;
  padding: 0rem 0.19rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3e3d3d;
  border-radius: 0.05rem 0.05rem 0rem 0rem;
  p {
    font-size: 0.14rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }
  .el-icon-close {
    width: 0.14rem;
    height: 0.14rem;
    color: white;
  }
}
/*    一类标签*/
.label .el-collapse-item__header {
  color: #ffffff;
  padding: 0rem 0.25rem;
  background: #474747 !important;
  border: none !important;
  font-size: 0.14rem;
}
.label .el-collapse {
  border: none;
}
.label .el-collapse-item__wrap {
  border: none !important;
}
.label .el-collapse-item__content {
  padding: 0rem 0.25rem;
  background: #474747;
  color: #ffffff;
  border: 1px solid #474747;
  div {
    cursor: pointer;
    margin-bottom: 0.189rem;
    display: inline-block;
    width: 0.66rem;
    height: 0.2rem;
    border: 0.01rem solid #cccccc;
    margin-left: 0.15rem;
    line-height: 0.2rem;
    text-align: center;
    font-size: 0.14rem;
  }
  .box1,
  .box8,
  .box9 {
    img {
      margin-top: 0.06rem;
      width: 0.14rem;
      height: 0.08rem;
    }
    background: #fba613;
    border: 1px solid #fba613;
    border: none;
  }
  .box8 {
    background: #74bfff;
  }
  .box9 {
    background: #229178;
  }
}
/*    按钮*/
.btn {
  margin-top: 0.2rem;

  display: flex;
  justify-content: flex-end;
  margin-right: 0.27rem;
}
</style>
